<!DOCTYPE html>
<html>
<head>
	<title>3-4 计算属性,方法与侦听器</title>
	<script type="text/javascript" src="../../vue.js"></script>
</head>
<body>
	<!-- 
		需求:firstName和lastName拼接,实现一个完整的名字
	 -->
	<div id='root'>
		<!-- 不灵活{{firstName + ' ' + lastName}} -->
		{{fullName}}
		<!-- 用方法计算的话,就这样调用 -->
		<!-- {{fullName()}} -->
		{{age}}
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#root',
			data: {
				firstName: 'Yao',
				lastName: 'Ming',
				age: 38,
				fullName:'Yao Ming'
				//以下这两种写法都不行
				// fullName : firstName + ' ' + lastName
				// fullName : this.firstName + ' ' + this.lastName
			},
			/**
			 * 方法一:通过计算属性
			 *   1.fullName的值依赖于firstName 和 lastName,
			     2.计算属性第一次计算后会将计算的值缓存起来,当它依赖的值没有发生变化时,就在缓存里取值.  
			 */
			/*computed:{
				fullName: function(){
					console.log('计算了一次');
					return this.firstName + ' ' + this.lastName
				}
			},*/
			/**
			 * 方法二:通过方法
			 *  它不会将值缓存起来,请求一次就计算一次
			 */
			/*methods:{
				fullName:function(){
					console.log('计算了一次');
					return this.firstName + ' ' + this.lastName
				}
			}*/

			/**
			 * 方法三:通过 watch 侦听器
			 *  1.它也会产生缓存.
			    2.用watch监视firstName和lastName的变化,一旦依赖的值发生变化,就会重新拼接
			 */
			watch:{
				firstName:function(){
					console.log('计算了一次');
					this.fullName = this.firstName + ' ' + this.lastName
				},
				lastName:function(){
					this.fullName = this.firstName + ' ' + this.lastName
				}
			}
		});
	</script>
</body>
</html>